<template>
  <div class="inspectionlist">
    <div class="inspectionlist_left">
      <div class="title">检验项目</div>
      <ul>
        <el-scrollbar height="400px">
          <li class="list" :class="{active:inspectionStyle === index}" v-for="(item, index) in list" :key="index" @click="onInspection(item,index)">
            <div class="number">{{ index + 1 }}</div>
            <div class="name">{{ item.title }}</div>
            <div class="time">{{ item.time }}</div>
          </li>
        </el-scrollbar>
      </ul>
    </div>
    <div class="inspectionlist_right">
      <div class="msg">
        <div class="time">
          <div class="name">采样时间: </div>
          <div class="content">2023-6-21 09:35:51</div>
        </div>
        <div class="time">
          <div class="name">接收时间: </div>
          <div class="content">2023-6-21 10:00:51</div>
        </div>
        <div class="time">
          <div class="name">检测时间: </div>
          <div class="content">2023-6-21 10:05:21</div>
        </div>
        <div class="time">
          <div class="name">报告时间: </div>
          <div class="content">2023-6-21 12:35:51</div>
        </div>
      </div>
      <div class="table">
        <Table :columnList="columnList" :tableData="tableData"></Table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onBeforeMount, onMounted } from "vue";
import Table from '@/components/Table/table.vue'
const props = defineProps({
  list: {
    type: Array,
    default: [],
  },
  tableData:{
    type:Array,
    default:[]
  },
  columnList:{
    type:Array,
    default:[]
  }
});
const inspectionStyle = ref(2)

const onInspection =(item,index)=>{
  inspectionStyle.value =index
}
</script>
<style scoped lang="scss">
.inspectionlist {
  display: flex;
    padding: 0 16px;
  .inspectionlist_left {
    width: 24%;
    margin-right: 24px;
    .title {
      border-radius: 6px 6px 0px 0px;
      background: rgba(255, 255, 255, 0.1);
      color: var(--Gray-White, #fff);
      font-family: "Microsoft YaHei";
      font-size: 16px;
      font-style: normal;
      font-weight: 700;
      line-height: 50px; /* 137.5% */
      height: 50px;
      text-align: center;
    }
    ul {
      .list {
        display: flex;
        justify-content: space-between;
        height: 60px;
        line-height: 60px;
        color: var(--Gray-Gray5, #C5C5C5);
        .number {
          width: 10%;
          text-align: center;
          
        }
        .time {
          width: 40%;
          text-align: center;
        }
      }

      .list:hover {
        // background: rgba(255, 255, 255, 0.1);
      }
      .active{
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
      }
    }
  }
  .inspectionlist_right {
    width: 85%;
    .msg {
      display: flex;
      justify-content: right;
      .time {
        display: flex;
        align-items: center;
        height: 50px;
        margin-left: 10px;
        .name {
          color: var(--Gray-Gray8, #777);
          font-family: "Microsoft YaHei";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
          margin-right: 3px;
        }
        .content {
          color: var(--Gray-Gray4-, #dcdcdc);
          font-family: "Microsoft YaHei";
          font-size: 14px;
          font-style: normal;
          font-weight: 400;
          line-height: 22px; /* 157.143% */
        }
      }
    }
   
  }
}
</style>
